<template>
	<view>
		<view class="context">
			<view class="cancel" @click="toIndex">
				<uni-icons type="closeempty" color="#161412" size="30"></uni-icons>
			</view>
			<view class="title">
				密码登陆
			</view>
			<view class="form">
				<view class="username">
					<input type="text" placeholder="用户名,手机号或邮箱" v-model="username" />
					<uni-icons type="clear" size="14" color="#808080" v-show="username" @click="username = ''"></uni-icons>
				</view>
				<view class="bar">

				</view>
				<view class="password">
					<input type="password" placeholder="密码" v-model="password" />
					<uni-icons type="clear" size="14" color="#808080" v-show="password" @click="password = ''"></uni-icons>
				</view>
				<view v-show="verifyCode">
					<view class="bar">

					</view>
					<view class="verify-code">
						<input type="text" placeholder="验证码" v-model="code" />
						<uni-icons type="clear" size="14" :color="code === '' ? '#f7f7fa' : '#808080'" @click="code = ''"></uni-icons>
						<image @click="getVerifyCode" :src="verifyCodePic" mode="widthFix"></image>
					</view>
				</view>

				<button @click="login" type="default" :class="(password.length > 0 & username.length > 0 & ((verifyCode & code.length > 0) || (!verifyCode)))? '' : 'disable'"
				 :disabled="!(password.length > 0 & username.length > 0 & ((verifyCode & code.length > 0) || (!verifyCode)))">登陆</button>
			</view>
			<view class="small">
				<view class="message" @click="toMessage">
					短信验证码登陆
				</view>
				<view class="forget" @click="toMessage">
					忘记密码？
				</view>
			</view>
			<!-- 			<view class="other">
				<text>其他登陆方式</text>
				<view class="list">
					<view class="item">
						<text class="iconfont icon-tubiaozhizuomoban"></text>
					</view>
					<view class="item">
						<text class="iconfont icon-QQ"></text>
					</view>
					<view class="item">
						<text class="iconfont icon-28"></text>






					</view>
				</view>
			</view> -->

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				password: '',
				cannot: true,
				loginTimes: 0,
				verifyCode: false,
				code: '',
				verifyCodePic: '',
				codeAnswer: ''
			}
		},
		methods: {
			toIndex() {
				uni.switchTab({
					url: '../index/index',

				})
			},
			toMessage() {
				uni.navigateTo({
					animationType: 'fade-in',
					url: '../login/login'
				})
			},
			login() {
				var that = this
				var con = true
				/*判断验证码是否正确*/
				con = false
				if (that.code.toLowerCase() === that.codeAnswer.toLowerCase()) {
					con = true
				} else {
					uni.showToast({
						title: '验证码错误',
						icon: 'none'
					})
				}

				if (con) {
					// todo: 验证密码是否正确
					// mock
					if (that.password === 'a') {
						uni.showToast({
							title: '用户名或密码错误',
							icon: 'none'
						})
						// 错误次数++ 大于四次需要输入验证码
						if (++that.loginTimes > 4) {
							uni.setStorage({
								key: 'verify-code',
								data: true,
								success() {
									that.verifyCode = true
								},
								complete() {
									that.getVerifyCode()
								}
							})
						}
					} else {
						uni.showToast({
							title: '登陆成功，欢迎回来',
							icon: 'none'
						})
						uni.removeStorage({
							key: 'verify-code',
							complete() {
								// 页面跳转、记录用户数据
								that.get('user/one/1', null, (res) => {
									console.log(res)
									uni.setStorage({
										key: 'login-status',
										data: true
									})
									uni.setStorage({
										key: 'user-obj',
										data: res.data.user,
										success() {
											uni.switchTab({
												url: '../index/index'
											})
										}
									})
								})

							}


						})
					}
					// end
				}

			},
			getVerifyCode() {
				var timestamp = new Date().getTime()
				var url = 'http://192.168.0.102:99/api/common/captcha' + '?timestamp=' + timestamp
				uni.request({
					url,
					success: (res) => {
						this.verifyCodePic = 'data:image/jpeg;base64,' + res.data.data.bytes
						this.codeAnswer = res.data.data.code
					}
				})
			}
		},
		onLoad() {
			uni.getStorage({
				key: 'verify-code',
				success: (res) => {
					this.verifyCode = res.data
					this.getVerifyCode()
				}
			})
		}
	}
</script>

<style lang="scss">
	.context {
		.cancel {
			margin: 50rpx 20rpx 0;
		}

		padding: 30rpx;

		.title {
			padding-left: 40rpx;
			padding-top: 50rpx;
			padding-bottom: 40rpx;
			font-size: 48rpx;
			font-weight: 600;
		}

		.form {
			.username {
				margin: 40rpx 0;
				padding-right: 50rpx;
				margin-bottom: 0rpx;
				display: flex;
				flex-direction: row;
				align-items: center;

				input {
					margin: 0rpx 40rpx;
					padding: 10rpx 20rpx;
					font-size: 32rpx;
					width: 100%;
				}
			}

			.bar {
				height: 3rpx;
				border-radius: 20rpx;
				background-color: #a7a7a7;
				margin: 20rpx 55rpx;
			}

			.password {
				margin: 20rpx 0;
				padding-right: 50rpx;
				margin-bottom: 0rpx;
				display: flex;
				flex-direction: row;
				align-items: center;

				input {
					margin: 0rpx 40rpx;
					padding: 10rpx 20rpx;
					font-size: 32rpx;
					width: 100%;
				}
			}

			.verify-code {
				margin: 20rpx 0;
				padding-right: 50rpx;
				margin-bottom: 0rpx;
				display: flex;
				flex-direction: row;
				align-items: center;

				input {
					margin: 0rpx 40rpx;
					padding: 10rpx 20rpx;
					font-size: 32rpx;
					width: 100%;
				}

				image {
					margin-left: 20rpx;
					width: 360rpx;
				}
			}

			button {
				height: 80rpx;
				margin: 0 40rpx;
				margin-top: 20rpx;
				margin-bottom: 30rpx;
				line-height: 80rpx;
				color: #FFFDEF;
				background-color: $color1;
				font-size: $uni-font-size-base;

				&.disable {
					color: $uni-text-color-disable;
					background-color: #92afbe;
				}
			}
		}

		.small {
			display: flex;
			padding: 20rpx 40rpx;
			font-size: $uni-font-size-sm;
			flex-direction: row;
			justify-content: space-between;
		}

		.other {
			position: fixed;
			bottom: 0rpx;
			text-align: center;
			left: 0;
			width: 100%;
			color: #404040;
			font-size: $uni-font-size-base;
			padding-bottom: 30rpx;

			.list {
				display: flex;
				flex-direction: row;
				margin-top: 30rpx;
				padding: 20rpx 0;
				justify-content: center;

				.item {
					text-align: center;
					width: 80rpx;
					margin: 0 40rpx;
					height: 80rpx;
					text-align: center;
					line-height: 80rpx;
					background-color: #e9e7eb;
					border-radius: 50%;

					.icon-tubiaozhizuomoban {
						color: #00b613;
						font-size: 45rpx;
					}

					.icon-QQ {
						color: #0066b3;
						font-size: 45rpx;
					}

					.icon-28 {
						color: #d61726;
						font-size: 45rpx;
					}
				}
			}
		}
	}
</style>
